<template>
<div>
<!--  建议投诉  -->

<!--  <el-page-header @back="goBack" title="行政" content="建议投诉" ></el-page-header>-->

  <!--  分割线  -->
  <el-divider class="head"></el-divider>

  <!--    高级查询-->

  <div v-if="!bodyShow">
  <el-row>
    <el-form :inline="true" :model="AdmComplainForm" >

      <el-col :span="2.5">
        <el-form-item>
          <el-input v-model="AdmComplainForm.client" placeholder="请输入客户名称"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="2.5">
        <el-form-item label="开始时间:">
          <el-date-picker
              v-model="AdmComplainForm.StartComplainSubmitTime"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择开始时间">
          </el-date-picker>
        </el-form-item>
      </el-col>

      <el-col :span="2.5">
        <el-form-item label="结束时间:">
          <el-date-picker
              v-model="AdmComplainForm.EndComplainSubmitTime"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择结束时间">
          </el-date-picker>
        </el-form-item>
      </el-col>


      <el-col :span="2">
        <el-form-item>
          <el-button type="primary" plain @click="QueryAdmComplain" icon="el-icon-search">检索</el-button>
        </el-form-item>
      </el-col>


    </el-form>

  </el-row>


  <el-table
      :data="AdmComplainData"
      style="width: 100%">
    <el-table-column
        prop="complainContent"
        label="提交内容">
    </el-table-column>
    <el-table-column
        label="案件">
    <template slot-scope="scope">
      <el-button type="text" @click="QueryAnJian(scope.row.caseId)">{{scope.row.caseNo}}</el-button>
    </template>
    </el-table-column>

    <el-table-column
        prop="client"
        label="客户名称">
    </el-table-column>

    <el-table-column
        prop="phone"
        label="联系电话">
    </el-table-column>

    <el-table-column
        prop="complainSubmitTime"
        label="提交时间">
    </el-table-column>

    <el-table-column
        prop="complainReplyNumber"
        label="回复数">
    </el-table-column>

  </el-table>


  <el-pagination
      @size-change="handleSizeTJChange"
      @current-change="handleCurrentTJChange"
      :page-sizes="[2, 4, 6, 8]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageData.total">
  </el-pagination>
  </div>

  <div v-if="!active">
    <CaseDetails :case-id="caseId" @back="back"></CaseDetails>
  </div>


</div>
</template>

<script>
import CaseDetails from '../../wyq/CaseDetails'

export default {
  name: "AdmComplain",
  components:{
    CaseDetails
  },
  data(){
    return{
      pageData:{}, // 分页数据
      bodyShow:false,
      active:true,
      caseId:'',

      AdmComplainForm:{ // 高差表单
        pageSize:'2',
        pageCur:"1",
      },
      AdmComplainData:[], // 查询表格数据

    }
  },
  created() {
this.QueryAdmComplain();
  },
  methods:{
    back(){
      this.active=true
      this.bodyShow=false
    },
    goBack(){ this.$router.go(-1) },
    QueryAdmComplain(){ // 查询数据

      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });


      this.$http.get("admComplain",{params:this.AdmComplainForm})
      .then(res => {
        setTimeout(() => {
          loading.close();
        });
        this.pageData = res.data.data
        this.AdmComplainData = res.data.data.list
      })
      .catch()
    },
    handleSizeTJChange(val){
      this.AdmComplainForm.pageSize=val
      this.QueryAdmComplain();
    },
    handleCurrentTJChange(val){
      this.AdmComplainForm.pageCur=val
      this.QueryAdmComplain()

    },
    QueryAnJian(caseId){
      this.bodyShow = true
      this.caseId=caseId;
      this.active=false;
    },
  }
}
</script>

<style scoped>

.head{
  margin-top: 10px ;
  margin-bottom: 15px ;
  height: 2px;
}

</style>